<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.springframework.org/schema/data/jaxb">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>放映厅管理</title>
    <link th:href="@{/managerstatic/plugins/layui/css/layui.css}" rel="stylesheet" media="all" />
</head>

<body>
    <table class="layui-hide" id="test" lay-filter="test"></table>
    <div id="add-main" style="display: none;">
        <form class="layui-form" id="add-form" action="" style="margin-top: 30px">
            <div class="layui-form-item center" >
                <label class="layui-form-label" style="width: 100px" >影厅名称</label>
                <input type="text" id="id" style="display:none" />
                <div class="layui-input-block">
                    <input type="text" id="hallname" name="hallname" required value="" style="width: 240px" lay-verify="required" placeholder="请输入影厅名称" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label" style="width: 100px">最大人数</label>
                <div class="layui-input-block">
                    <input type="text" id="seatsnum" name="seatsnum" required style="width: 240px" lay-verify="required" placeholder="请输入最大容纳人数" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label" style="width: 100px">影厅描述</label>
                <div class="layui-input-block">
                    <input type="text" id="description" name="description" required style="width: 240px" lay-verify="required" placeholder="请输入影厅描述" autocomplete="off" class="layui-input">
                </div>
            </div>
        </form>
    </div>


    <script type="text/html" id="toolbarDemo">
        <div class="layui-btn-container">
            <button class="layui-btn" lay-event="insertForm">新增</button>
            <button class="layui-btn layui-btn-normal" lay-event="updateForm">编辑</button>
            <button class="layui-btn layui-btn-danger" lay-event="deleteMyData">删除</button>
        </div>
    </script>

    <script type="text/html" id="barDemo">
        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    </script>
    <script th:src="@{/managerstatic/plugins/jquery.min.js}"></script>
    <script th:src="@{/managerstatic/plugins/layui/layui.js}"></script>
    <script th:inline="none">
        layui.use(['table','form','layer'], function(){
            var table = layui.table;
            table.render({
                elem: '#test'
                ,id: 'testReload'
                ,url:'/hall/selectAll'
                ,toolbar: '#toolbarDemo'
                ,page: { //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
                    layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'] //自定义分页布局
                    //,curr: 5 //设定初始在第 5 页
                    ,groups: 1 //只显示 1 个连续页码
                    ,first: false //不显示首页
                    ,last: false //不显示尾页

                }
                ,cellMinWidth: 80
                ,cols: [[
                    {type: 'checkbox', fixed: 'left'}
                    ,{field: 'id', title: 'ID',width:100, align: 'center', sort: true}
                    ,{field: 'hallname', title: '影厅名', width:300, align: 'center', sort: true}
                    ,{field: 'seatsnum', title: '最大人数', width:300,  align: 'center', sort: true}
                    ,{field: 'description', title: '描述', align: 'center'}
                ]]
            });
            ///头工具栏事件
            table.on('toolbar(test)', function(obj){
                var checkStatus = table.checkStatus(obj.config.id);
                var data = checkStatus.data;
                switch(obj.event){
                    case 'updateForm':
                        updateForm(data);
                        break;
                    case 'insertForm':
                        insertForm();
                        break;
                    case 'deleteMyData':
                        deleteForm(data);
                        break;
                };
            });
            var $ = layui.$, active = {
                reload: function(){
                    var demoReload = $('#demoReload');
                    //执行重载
                    table.reload('testReload', {
                        page: {
                            curr: 1 //重新从第 1 页开始
                        }
                        ,where: {
                            keyword: demoReload.val()
                        }
                    }, 'data');
                }
            };

            $('.demoTable .layui-btn').on('click', function(){
                var type = $(this).data('type');
                active[type] ? active[type].call(this) : '';
            });
        });


        //检查是否为正整数
        function isUnsignedInteger(a) {
            var reg =/^d+$/;
            return reg.test(a);
        }

        function insertForm() {
            layer.open({
                type: 1,
                title:"新增影厅",
                area: ['450px', '320px'],
                btn: ['确定', '取消'],
                content: $("#add-main"),
                success: function(){
                    $("#hallname").val("");
                    $("#seatsnum").val("");
                    $("#description").val("");
                },
                yes:function(index){
                    $.ajax({
                        url:"/hall/add",
                        type:"post",
                        data:{
                            'hallname': $("#hallname").val(),
                            'seatsnum': $("#seatsnum").val(),
                            'description': $("#description").val()
                        },
                        success: function (data) {
                            layer.close(index);
                            if (data.code == 200) {
                                layui.table.reload('testReload', {
                                    page: {
                                        curr: 1 //重新从第 1 页开始
                                    }
                                });
                            }else {
                                layer.alert("插入失败");
                            }
                        }
                    });
                }
            });
        }

        function deleteForm(data) {
            if (data.length == 0){
                layer.alert("请选中一条数据");
                return;
            }
            console.log(data);
            layer.confirm('确认删除吗？', function(index){
                var ids = new Array();
                for (var i in data) {
                    ids.push(data[i].id);
                }
                $.ajax({
                    url:"/hall/delete",
                    data: "ids=" + ids,
                    success:function (data) {
                        layer.close(index);
                        if (data.code == 200) {
                            layui.table.reload('testReload', {
                                page: {
                                    curr: 1 //重新从第 1 页开始
                                }
                            });
                        }else {
                            layer.alert("删除失败");
                        }
                    }
                });
            });
        }

        function updateForm(data) {
            if (data.length != 1){
                layer.alert("请选中一条数据");
                return;
            }
            layer.open({
                type: 1,
                title:"修改影厅信息",
                area: ['450px', '320px'],
                btn: ['确定', '取消'],
                content: $("#add-main"),
                success: function(  ){
                    $("#id").val(data[0].id);
                    $("#hallname").val(data[0].hallname);
                    $("#seatsnum").val(data[0].seatsnum);
                    $("#description").val(data[0].description);
                },
                yes:function(index){
                    $.ajax({
                        url:"/hall/update",
                        type:"post",
                        data:{
                            'id': $("#id").val(),
                            'hallname': $("#hallname").val(),
                            'seatsnum': $("#seatsnum").val(),
                            'description': $("#description").val()
                        },
                        success: function (data) {
                            layer.close(index);
                            if (data.code == 200) {
                                layui.table.reload('testReload', {
                                    page: {
                                        curr: 1 //重新从第 1 页开始
                                    }
                                });
                            }else {
                                layer.alert("修改失败");
                            }
                        }
                    });
                }
            });

        }

    </script>

</body>

</html>